<template>
  <el-dialog
    v-bind="$attrs"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <slot />
    <span slot="footer" class="dialog-footer">
      <div v-if="!footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
      <slot name="footer" />
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    footer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },

  mounted() {
    this.dialogVisible = this.visible;
  },

  watch: {
    dialogVisible(newVal) {
      this.$emit("update:visible", newVal);
    },

    visible(newVal) {
      this.dialogVisible = newVal;
    }
  },

  methods: {
    //关闭前确认--------------------------------------------
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //确定按钮--------------------------------------------
    submit() {
      this.$emit("submit");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  min-width: 600px;
}
</style>
